<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>工资信息管理系统</title>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/isLoginUser.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		body {
			background-color: #F8F8F8;
			display: flex;
			min-height: calc(100vh - 90px);
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 30px;
			padding-bottom: 60px;
		}

		.board {
			width: 440px;
			padding: 20px 30px;
			padding-bottom: 50px;
			background-color: white;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.title {
			color: rgba(0, 0, 0, 0.6);
			margin-bottom: 30px;
		}

		.layui-upload-img {
			width: 100px;
			height: 100px;
			display: block;
			border-radius: 50%;
			border: 1px solid rgba(0, 0, 0, 0.2);
		}

		#picture {
			cursor: pointer;
		}

		.layui-form-pane {
			width: 100%;
		}

		.layui-elem-quote {
			height: 10px;
			line-height: 10px;
			width: 100%;
		}
	</style>
	<body>

		<div class="board">
			<h1 class="title">修改个人信息</h1>
			<input type="file" id="picture-input" style="display: none;" />
			
			<!-- <img class="layui-upload-img" src="" id="picture" alt="" title="点击选择图片" style="background-size: cover;">
			<button type="button" class="layui-btn layui-btn-sm" id="upload-picture" style="margin-top: 10px;">上传头像</button> -->
			
			<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 20px;">员工编号：<font id="id"></font></blockquote>
			<blockquote class="layui-elem-quote layui-quote-nm">员工姓名：<font id="name"></font></blockquote>
			<blockquote class="layui-elem-quote layui-quote-nm">所属部门：<font id="sector"></font></blockquote>
			<blockquote class="layui-elem-quote layui-quote-nm">员工职称：<font id="named"></font></blockquote>
			<blockquote class="layui-elem-quote layui-quote-nm">入职日期：<font id="date"></font></blockquote>
			<div class="layui-form-pane layui-form">
				<div class="layui-form-item" style="margin-top: 20px;">
					<label class="layui-form-label">手机号码</label>
					<div class="layui-input-block">
						<input id="phone" type="text" name="title" autocomplete="off" placeholder="请输入内容" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" pane="">
					<label class="layui-form-label">性别</label>
					<div id="sex" class="layui-input-block">
						<input class="sex" type="radio" name="sex" value="男" title="男" checked="checked">
						<input class="sex" type="radio" name="sex" value="女" title="女">
					</div>
				</div>
				<button id="ok" type="button" class="layui-btn" style="width: 100%;margin-top: 20px;">确认修改</button>
			</div>
		</div>

		<script type="text/javascript">
			layui.use(['form', 'layer', 'element'], function() {
				var form = layui.form;
				// 点击图片框开始选择图片
				/* $("#picture").click(function() {
					$("#picture-input").click();
				});
				// 上传图片预览
				$("#picture-input").on("change", function() {
					var files = !!this.files ? this.files : [];
					if (!files.length || !window.FileReader) return;
					if (/^image/.test(files[0].type)) {
						var reader = new FileReader();
						reader.readAsDataURL(files[0]);
						reader.onloadend = function() {
							$("#picture").attr("src", "");
							$("#picture").css("background-image", "url(" + this.result + ")");
						}
					}
				}); */
				// 上传头像
				/* $("#upload-picture").click(function() {
					if ($("#picture-input").val() == "") {
						layer.msg("请先点击头像并选择您要上传的头像");
					} else {
						var formData = new FormData();
						formData.append("picture", $('#picture-input')[0].files[0]);
						$.ajax({
							url: "",
							type: 'POST',
							async: false,
							data: formData,
							processData: false, // 使数据不做处理
							contentType: false, // 不要设置Content-Type请求头
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							success: function(result) {
								if (result == 1) {
									layer.msg('上传成功');
								} else {
									layer.msg('上传失败');
								}
							},
							error: function(e) {
								console.log(e.status);
								layer.msg('上传失败');
							}
						});
					}
				}); */
				
				// 更新信息
				$("#ok").click(function() {
					if ($("#phone").val() == "") {
						layer.msg("请输入内容");
					} else {
						$.ajax({
							url: "updateUserPart",
							type: 'POST',
							data: {
								phone: $("#phone").val(),
								sex: $("#sex input[type='radio']:checked").val(),
							},
							success: function(result) {
								layer.msg('修改成功');
							},
							error: function(e) {
								console.log(e.status);
								layer.msg('修改失败');
							}
						});
					}
				});
				

				// 获取信息
				$.ajax({
					url: "getIdUserNow",
					type: 'POST',
					data: {
						
					},
					success: function(result) {
						
						for(var i = 0;i < result.length;i++){
							$("#picture").css({'background':"url("+result[i].user_picture+")","background-size":"cover"});
							$("#id").html(result[i].user_id);
							$("#name").html(result[i].user_name);
							$("#sector").html(result[i].user_sector);
							$("#named").html(result[i].user_named);
							$("#date").html(result[i].user_time);
							$("#phone").val(result[i].user_phone);
							$(":radio[name='sex'][value='" + result[i].user_sex + "']").attr("checked", true);
						}
						form.render('radio');
						
					},
					error: function(e) {
						console.log(e.status);
						layer.msg('获取失败');
					}
				});
				
			});
		</script>

	</body>
</html>
